

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>聊天记录</title>

  <link rel="stylesheet" href="../../../layui.css">
  <style>
    body .layim-chat-main{height: auto;}
  </style>
</head>
<body>

<div id="LAY_page" style="margin: 0 10px;"></div>
<div class="layim-chat-main">
  <ul id="LAY_view"></ul>
</div>


<textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{# layui.each(d.data, function(index, item){
  if(item.id == parent.layui.layim.cache().mine.id){ }}
    <li class="layim-chat-mine"><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite><i>{{ layui.data.date(item.timestamp) }}</i>{{ item.username }}</cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# } else { }}
    <li><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite>{{ item.username }}<i>{{ layui.data.date(item.timestamp) }}</i></cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# }
}); }}
</textarea>

<!--
上述模版采用了 laytpl 语法，不了解的同学可以去看下文档：http://www.layui.com/doc/modules/laytpl.html

-->


<script src="../../../../layui.js"></script>
<script src="../../../../../js/axios.js"></script>
<script src="../../../../../js/axios_instance.js"></script>
<script>
  layui.use(['layim', 'laypage','flow'], function(){
    var layim = layui.layim
            ,layer = layui.layer
            ,laytpl = layui.laytpl
            ,$ = layui.jquery
            ,flow=layui.flow
            ,laypage = layui.laypage;


    //开始请求聊天记录
    var param =  location.search; //获得URL参数。该窗口url会携带会话id和type，他们是你请求聊天记录的重要凭据

    // 流加载===============
    flow.load({
      elem: '#LAY_view' //指定列表容器
      ,isLazyimg: true// 图片懒加载
      ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
        var lis = [];

        console.log(page);
        request({
          method: 'get',
          url: '/layim/chatlog' + param + '&page='+page
        }).then(res => {
          if (res.code != 0){
            return layer.msg(res.msg)
          }
          layui.each(res.data, function(index, item){
            if (item.id == parent.layui.layim.cache().mine.id){
              lis.push("<li class=\"layim-chat-mine\"><div class=\"layim-chat-user\"><img lay-src=\""+item.avatar+"\"><cite><i>"+layui.data.date(item.timestamp)+"</i>"+item.username+"</cite></div><div class=\"layim-chat-text\">"+layui.layim.content(item.content)+"</div></li>")
            }else{
              lis.push("<li><div class=\"layim-chat-user\"><img lay-src=\""+item.avatar+"\"><cite>"+item.username+"<i>"+layui.data.date(item.timestamp)+"</i></cite></div><div class=\"layim-chat-text\">"+layui.layim.content(item.content)+"</div></li>")
            }
          });

          //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
          //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
          next(lis.join(''), page < res.pages);

        })
      }
    });

    // 分页=============
    // request({
    //   method: 'get',
    //   url: '/layim/chatlog' + param
    // }).then(res => {
    //   if (res.code != 0){
    //     return layer.msg(res.msg)
    //   }
    //   laypage.render({
    //     elem: 'LAY_page'
    //     ,count: res.total
    //     ,layout: ['count', 'prev',  'next', 'skip']
    //     ,jump: function(obj,first){
    //       console.log(obj);
    //       if(!first) {
    //         bindingMessage(obj.curr-1)
    //       }else{
    //         bindingMessage(0)
    //       }
    //     }
    //   });
    // })

    // function bindingMessage(page) {
    //   request({
    //     method: 'get',
    //     url: '/layim/chatlog' + param + '&page='+page
    //   }).then(res => {
    //     if (res.code != 0){
    //       return layer.msg(res.msg)
    //     }
    //
    //     var html = laytpl(LAY_tpl.value).render({
    //       data: res.data
    //     });
    //     $('#LAY_view').html(html);
    //   })
    // }

  });
</script>
</body>
</html>
